
<template>
  <div class="echarts">
    
    <div :style="{ width: '100%', height: '800px' }" ref="myEcharts"></div>
  </div>
</template>
<script>
// 引入 echarts
import echarts from "echarts"
// import "../../../../../node_modules/echarts/map/js/china.js" 
import "../../../../node_modules/echarts/map/js/china"//  引入中国地图数据
export default {


  name: "echarts",
  data() {
    return {
      chart: null,
    }

  },
  mounted() {
    this.chinaConfigure();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    chinaConfigure() {
      let myChart = echarts.init(this.$refs.myEcharts); //  获取容器所在的位置
      window.onresize = myChart.resize;
      myChart.setOption({
        //  进行相关配置
        backgroundColor: "#FFFFFF",
        dataRange: {
          show: false,
          min: 0,
          max: 1000,
          text: ["High", "Low"],
          realtime: true,
          calculble: true,
          color: ["#bad520"],
        },
        geo: {
          //  配置区域
          map: "china", //   载入的地图文件
          roam: false, //  鼠标缩放（scale）、平移漫游（move）。设置成 true 都开启，默认不开启
          label: {
            //  图形上的地理标签
            normal: {
              show: true, //  是否显示对应的 地理 标签
              textStyle: {
                //  地理标签样式
                color: "rgba(0,0,0)", //  地理标签 - 字体颜色
              },
            },
          },
          itemStyle: {
            //  地图区域的图形样式
            normal: {
              //  正常状态下 地理位置 样式
              borderColor: "#bad520", //  轮廓颜色
              color: "#399373", //  图形背景颜色
            },
            emphasis: {
              //  高亮状态下 地理位置 样式
              areaColor: "#bad520", //  背景颜色
              shadowOffsetX: 0, //  背景阴影 - Y - 偏移
              shadowOffsetY: 0, //  背景阴影 - X - 偏移
              shadowBlur: 20, //  背景阴影 - 长度
              borderWidth: 0, //  边框宽度
              shadowColor: "rgba(0, 0, 0, 0.5)", //  轮廓颜色
            },
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{b}",
          backgroundColor: "red",
        },
        series: [
          {
            type: "scatter", //  地理坐标系
            coordinateSystem: "geo", // 使用地理坐标系配置
          },
          {
            name: "中国", // 浮动框的标题
            type: "map",
            geoIndex: 0,
            data: [
              {
                name: "北京",
                value: 0,
              },
              {
                name: "河北",
                value: 1,
              },
              {
                name: "天津",
                value: 2,
              },
              {
                name: "四川",
                value: 3,
              },
              {
                name: "贵州",
                value: 4,
              },
              {
                name: "湖南",
                value: 5,
              },
              {
                name: "湖北",
                value: 6,
              },
              {
                name: "福建",
                value: 7,
              },
              {
                name: "上海",
                value: 8,
              },
              {
                name: "江苏",
                value: 9,
              },
            ],
          },
        ],
      });
    },
  },
};
</script>
